<template>
    <div class="outmain ba_f selforder">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>自提订单</span>
            </div>
        </div>
        <div class="flex flex-center mar_t90">
            <div class="pad_r_10 fon_22">验证取货码</div>
            <div class="hexiao">
                <el-input placeholder="请输入核销码" v-model="selfCode" type="number">
                    <template slot="append">
                        <div class="hexiao"  @click="hexiao">核销</div>
                    </template>
                </el-input>
            </div>
        </div>
        <div class="t_c mar_t40">
            <div class="pad_t_30">
                <img class="wid selfordericon" src="@/assets/img/order/bag.png"/>
            </div>
            <div class="mar_t20">{{selfNumber}}个待自提订单</div>
            <div class="mar_t20">
                <el-button type="primary" plain @click="ljch">立即查看</el-button>
            </div>
        </div>
        <el-dialog title="自提订单详情" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false">
            <el-form :model="form" label-width="180px">
                <el-form-item label="取单号：">
                    # {{form.takeNo}}
                </el-form-item>
                <el-form-item label="自提时间：">
                    <div v-if="form.appointment=='1'">
                        预约{{form.serviceAt}}
                    </div>
                    <div v-else>
                        {{form.serviceAt}}
                    </div>
                </el-form-item>
                <el-form-item label="手机号：">
                    {{form.receivedTel}}
                </el-form-item>
                <el-form-item label="订单金额：">
                    {{form.money}}
                </el-form-item>
                <el-form-item label="下单时间：">
                    {{form.createdAt}}
                </el-form-item>
                <el-form-item label="订单编号：">
                    {{form.outTradeNo}}
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="modifyOrder(selfCode,'verification')">确认核销</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {modifyOrder,getModifyOrder,waitWriteOff} from "@/api/order";
    import {mapState} from "vuex";

    export default {
        created() {
            this.init();
        },
        computed: {
            ...mapState(['storeId']),
        },
        data() {
            return {
                selfCode: '',
                dialogFormVisible: false,
                form: {
                    createdAt: '',
                    money: '',
                    outTradeNo: '',
                    receivedTel: '',
                    takeNo: '',
                    appointment: '',
                    serviceAt: '',
                },
                selfNumber:'0',
            }
        },
        methods: {
            async init(){
                this.selfCode = ''
                const {data} = await waitWriteOff({storeId:this.storeId});
                if(data){
                    this.selfNumber = data
                }
            },
            async hexiao() {
                if (this.selfCode) {
                    const {data} = await getModifyOrder({selfCode:this.selfCode,type:'verification',storeId:this.storeId});
                    console.log(data)
                    if(data){
                        this.form2 = this.form
                        this.form = Object.assign(this.form2, data);
                    }
                    this.dialogFormVisible = true
                } else {
                    this.$baseMessage('请输入核销码', "warning");
                }
            },
            async modifyOrder(selfCode, type) {
                const {msg} = await modifyOrder({selfCode, type,storeId:this.storeId});
                this.dialogFormVisible =false
                this.$baseMessage(msg, "success");
                this.init()
            },
            ljch() {
                this.$router.push(`/storeorderinquiry?orderType=${3}&orderState=${9}&timeType=${0}`);
            },
        }
    }
</script>
<style lang="scss">
    .selforder{
        .mar_t90 {
            margin-top: 90px;
        }

        .hexiao .el-input__inner {
            height: 56px;
            line-height: 56px;
            width: 370px;
            font-size: 18px;
        }

        .el-input-group__append {
            width: 100px;
            text-align: center;
            background-color: #155BD4;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            padding: 0;
        }

        .selfordericon {
            width: 60px;
            height: 60px;
        }
        .hexiao{
            padding: 13px 20px;
        }
        .el-button.is-plain:focus, .el-button.is-plain:hover {
            color: #fff;
        }
    }
</style>
